<template>
    <div>
        <div class="topBtn">
            <el-button type="primary" @click="addDept">+ 新增部门</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="100" type="index" align="center">

            </el-table-column>
            <el-table-column label="部门名称" prop="name" align="center">

            </el-table-column>
            <el-table-column label="最后操作时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime.replace('T', " ") }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="40%" @close="handleClose">
            <el-form :model="FormData" ref="form" label-width="130px" label-position="left" :inline="true" :rules="rules"
                @submit.native.prevent>
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="FormData.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            FormData: {
                name: '',
            },
            dialogTitle: '新增部门',
            value: null,
            dialogFormVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        async getDeptList() {
            try {
                let { data: res } = await this.$api.getList();
                if (res.code == 1) {
                    this.tableData = res.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleEdit(index, value) {
            this.dialogTitle = '编辑部门'
            this.FormData = {
                name: value.name,
                id: value.id
            }
            this.dialogFormVisible = true
        },
        handleDelete(index, value) {
            this.$confirm('此操作将删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$api.deleteDept(value.id)
                if (res.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getDeptList();
                }
            }).catch(() => {

            });
        },
        handleClose() {
            this.FormData = {
                name: ''
            }
        },
        addDept() {
            this.dialogTitle = '新增部门'
            this.dialogFormVisible = true;
        },
        closeDialog() {
            this.dialogFormVisible = false
        },
        submit(form) {
            if (this.dialogTitle == '新增部门') {
                this.$refs[form].validate(async (valid) => {
                    if (valid) {
                        const { data: res } = await this.$api.addDept(this.FormData)
                        if (res.code == 1) {
                            this.$message({
                                message: '添加部门成功！',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.getDeptList()
                        } else {
                            this.$message({
                                message: "添加失败",
                                type: 'error'
                            });
                        }
                    } else {
                        return false;
                    }
                });
            } else if (this.dialogTitle = '编辑部门') {
                this.$refs[form].validate(async (valid) => {
                    if (valid) {
                        const { data: res } = await this.$api.editDept(this.FormData)
                        if (res.code == 1) {
                            this.$message({
                                message: '修改部门成功！',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.getDeptList()
                        } else {
                            this.$message({
                                message: '修改失败！',
                                type: 'error'
                            });
                        }
                    } else {
                        return false;
                    }
                });
            }

        },
    },
    created() {
        this.getDeptList()
    }
}
</script>

<style lang="scss" scoped>
.topBtn {
    text-align: start;
    margin-bottom: 10px;
}
</style>